<template>
  <div v-title data-title="动物保护协会">
    <el-container>
      <el-carousel indicator-position="outside" style="width: 100%">
        <el-carousel-item v-for="item in imgList" :key="item.name">
          <img :src="item.src" style="height:100%;width:100%;" alt="图片丢失了" :title="item.title"/>
        </el-carousel-item>
      </el-carousel>
    </el-container>
    <div class="wrap">
      <div class="left">
        <h3>新闻热点</h3>
      </div>
      <div class="right">
        <el-button  type="text" @click="more('2')">查看更多>></el-button>
      </div>
    </div>
    <div style="margin-top:20px " class="wrap">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in newsarticles">
          <div class="grid-content">
            <div class="top">
              <a @click="view(item.id)" class="me-article-title">
                <img :src="item.image" class="newsImg">
              </a>
            </div>
            <div class="bootom">
              <a @click="view(item.id)" class="me-article-title">
              <span>
                {{ item.title }}
              </span>
              </a>
            </div>
          </div>
        </el-col>
        <!--<el-col :span="6">
          <div class="grid-content">
            <div class="top">
              <img src="@/assets/img/g1.png" class="newsImg">
            </div>
            <div class="bootom"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="top">
              <img src="@/assets/img/g1.png" class="newsImg">
            </div>
            <div class="bootom"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="top">
              <img src="@/assets/img/g1.png" class="newsImg">
            </div>
            <div class="bootom">
              <P>wahefoiawhegoi</P>
            </div>
          </div>
        </el-col>-->
      </el-row>
    </div>
    <div class="wrap">
      <div class="left">
        <h3>宣传资料</h3>
      </div>
      <div class="right">
        <el-button  class="more" type="text" @click="more('1')">查看更多>></el-button>
      </div>
    </div>
    <div style="margin-top:20px " class="wrap">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in pubarticles">
          <div class="grid-content">
            <div class="top">
              <a @click="view(item.id)" class="me-article-title">
              <img :src="item.image" class="newsImg">
              </a>
            </div>
            <div class="bootom">
              <a @click="view(item.id)" class="me-article-title">
              <span>
                {{ item.title }}
              </span>
            </a>
            </div>
          </div>
        </el-col>
        <!--<el-col :span="6">
          <div class="grid-content">
            <div class="top">
              <img src="@/assets/img/g1.png" class="newsImg">
            </div>
            <div class="bootom"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="top">
              <img src="@/assets/img/g1.png" class="newsImg">
            </div>
            <div class="bootom"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="top">
              <img src="@/assets/img/g1.png" class="newsImg">
            </div>
            <div class="bootom">
              <P>wahefoiawhegoi</P>
            </div>
          </div>
        </el-col>-->
      </el-row>
    </div>
    <div class="wrap">

      <div class="left">
        <h3>活动信息</h3>
      </div>
      <div class="right">
        <el-button  class="more" type="text" @click="more('3')">查看更多>></el-button>
      </div>
    </div>
    <div style="margin-top:20px " class="wrap">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in activityarticles">
          <div class="grid-content">
            <div class="top">
              <a @click="view(item.id)" class="me-article-title">
                <img :src="item.image" class="newsImg">
              </a>
            </div>
            <div class="bootom">
              <a @click="view(item.id)" class="me-article-title">
              <span>
                {{ item.title }}
              </span>
              </a>
            </div>
          </div>
        </el-col>
        <!--<el-col :span="6">
          <div class="grid-content">
            <div class="top">
              <img src="@/assets/img/g1.png" class="newsImg">
            </div>
            <div class="bootom"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="top">
              <img src="@/assets/img/g1.png" class="newsImg">
            </div>
            <div class="bootom"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content">
            <div class="top">
              <img src="@/assets/img/g1.png" class="newsImg">
            </div>
            <div class="bootom">
              <P>wahefoiawhegoi</P>
            </div>
          </div>
        </el-col>-->
      </el-row>
    </div>
  </div>
</template>

<script>
  import ArticleScrollPage from '@/views/common/ArticleScrollPage'
  import CardArticle from '@/components/card/CardArticle'
  import CardMe from '@/components/card/CardMe'
  import CardTag from '@/components/card/CardTag'
  import CardArchive from '@/components/card/CardArchive'

  import { getArticles , getHotArtices , getNewArtices } from '@/api/article'
  import { getHotTags } from '@/api/tag'
  import { listArchives } from '@/api/article'

  export default {
    name : 'Index' ,
    data () {
      return {
        hotTags : [] ,
        hotArticles : [] ,
        newArticles : [] ,
        archives : [] ,
        imgList : [
          {
            name : "lj" ,
            src : require ( "@/assets/img/g1.png" ) ,
            title : "这是lj.png"
          } ,
          {
            name : "logo" ,
            src : require ( "@/assets/img/g2.png" ) ,
            title : "这是logo.png"
          } ,
          {
            name : "bg" ,
            src : require ( "@/assets/img/g3.png" ) ,
            title : "这是bg.png"
          } ,
          {
            name : "sadmas" ,
            src : require ( "@/assets/img/g4.png" ) ,
            title : "这是sadmas.png"
          }
        ],
        activityarticles:[],
        newsarticles:[],
        pubarticles:[]
      }
    } ,
    components : {
      'card-article' : CardArticle ,
      'card-me' : CardMe ,
      'card-tag' : CardTag ,
      ArticleScrollPage ,
      CardArchive
    } ,
    methods : {
      getHotArtices () {
        let that = this
        getHotArtices ().then ( data => {
          that.hotArticles = data.data
        } ).catch ( error => {
          if ( error !== 'error' ) {
            that.$message ( { type : 'error' , message : '最热文章加载失败!' , showClose : true } )
          }
        } )
      } ,
      getNewArtices () {
        let that = this
        getNewArtices ().then ( data => {
          that.newArticles = data.data
        } ).catch ( error => {
          if ( error !== 'error' ) {
            that.$message ( { type : 'error' , message : '最新文章加载失败!' , showClose : true } )
          }
        } )
      } ,
      getnewsArticles() {
        let that = this
        that.loading = true
        let data = '';
          data = {
            currentPage: 1,
            pageSize: 4,
            articleType:'2'
          }
        getArticles(data).then(data => {
          that.newsarticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '加载失败!', showClose: true})
          }
        }).finally(() => {
          that.loading = false
        })
      },
      getActivityArticles() {
        let that = this
        that.loading = true
        let data = '';
        data = {
          currentPage: 1,
          pageSize: 4,
          articleType:'3'
        }
        getArticles(data).then(data => {
          that.activityarticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '加载失败!', showClose: true})
          }
        }).finally(() => {
          that.loading = false
        })
      },
      getPubArticles() {
        let that = this
        that.loading = true
        let data = '';
        data = {
          currentPage: 1,
          pageSize: 4,
          articleType:'1'
        }
        getArticles(data).then(data => {
          that.pubarticles = data.data
        }).catch(error => {
          if (error !== 'error') {
            that.$message({type: 'error', message: '加载失败!', showClose: true})
          }
        }).finally(() => {
          that.loading = false
        })
      },
      listArchives () {
        listArchives ().then ( ( data => {
          this.archives = data.data
        } ) ).catch ( error => {
          if ( error !== 'error' ) {
            that.$message ( { type : 'error' , message : '文章归档加载失败!' , showClose : true } )
          }
        } )
      },
      more(type){
        this.$router.push ( { path : `/${ type }` } )
      },
      view(id) {
        this.$router.push({path: `/view/${id}`})
      }
    } ,
    created () {
     // this.getHotArtices ()
      //this.getNewArtices ()
      //this.getHotTags ()
      // this.listArchives()
      this.getActivityArticles()
      this.getnewsArticles()
      this.getPubArticles()
    }
  }
</script>

<style scoped>

  .el-container {
    width: 1100px;
    margin-top: -40px;
  }

  .el-aside {
    margin-left: 20px;
    width: 260px;
  }

  .el-main {
    padding: 0px;
    line-height: 16px;
  }

  .el-card {
    border-radius: 0;
  }

  .el-card:not(:first-child) {
    margin-top: 20px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  /*.bg-purple-dark {
    background: #99a9bf;
  }*/
  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 220px;
    border: 1px #8c939d solid;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .top{
    height:130px;
  }
  .bootom{
    padding: 10px;
    height: 50px;
  }

  .top,.bootom{
    border-radius: 4px;
  }

  .newsImg{
    height:100%;
    width:100%;
    border-radius:5px 5px 0 0;
  }
  .wrap{
    width: 1100px;
    clear: both;
  }
  .left{
    width: 50%;
    float: left;
  }
  .right{
    width: 50%;
    float: right;
    text-align: right;
  }

</style>
